import React from 'react';
import {
    DatePicker,
    Row,
    Col,
    Dropdown,
    Button,
    Menu,
    Tabs,
    Table
} from 'antd';
import axios from 'axios';
import moment from 'moment';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import './../CustomService/OrderInfo/OrderInfo.less';
import ReactEcharts from  'echarts-for-react';
const {  RangePicker } = DatePicker;
const TabPane = Tabs.TabPane;

export default class DailyReport extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: [],
            type: '售票日期',
            datastr:'',
            traders:[],
            dates:[],
            selldata:[],
            sellmoney:[],
            date:[],
            selldatas:[]
        };
    }

    componentDidMount() {
        this.getStaticsInfo('',this.state.type);
    };

    onChange = (date, dateString) => {
       //console.log(date,dateString);
       this.getStaticsInfo(dateString,this.state.type);
    }

    getStaticsInfo(startdate,type) {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        const url = `${config.api}CustomService/GetDailyReport?date=${startdate}&type=${type}`;
        axios.get(url,{headers:{Authorization:'Bearer ' + token}}).then((res) => {
            let tmp = res.data.sellInfo.map(item => {
              let a = {name:item.trader,type:'bar',data:item.amount};
              return a;
            })
            let tmp1 = res.data.sellInfo.map(item => {
              let a = {name:item.trader,type:'bar',data:item.money};
              return a;
            })
            let date = [moment(res.data.start, "YYYY-MM-DD"), moment(res.data.end, "YYYY-MM-DD")];
            this.setState({ loading: false,traders:res.data.traders,dates:res.data.dates,selldata:tmp,sellmoney:tmp1,date:date,selldatas:res.data.tradersellInfo});
        })
        .catch(err => {
            intercept
        })
    };
    handleMenuClick = (e) => {
        var selecttype = e.item.props.children;
        if (selecttype !== this.state.type) {
            this.setState({
                type: selecttype
            });
            this.getStaticsInfo('',selecttype);
        }
    }
    getOtion() {
      const option = {
        title: {
          text: '分销商售票张数',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:this.state.traders
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : this.state.dates
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : this.state.selldata
    };
      return option;
    }
    getOtion1() {
      const option = {
        title: {
          text: '分销商售票金额',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:this.state.traders
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : this.state.dates
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : this.state.sellmoney
    };
      return option;
    }
    render() {
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item>
                    发车日期
              </Menu.Item>
                <Menu.Item>
                    售票日期
              </Menu.Item>
            </Menu>
        );
        const columns = [{
          title: '日期',
          dataIndex: 'sellDate',
        },{
          title: '分销商',
          dataIndex: 'traderAccount',
        },{
          title: '售票量',
          dataIndex: 'totalAmount',
        },{
          title: '售票额',
          dataIndex: 'totalMoney',
        },];
        return (
            <div>
                <Row gutter={16}>
                    <Col className="gutter-row" span={24}>
                        <div
                            style={{
                                textAlign: 'center',
                                margin: 10
                            }}>
                            <Dropdown overlay={menu} placement="bottomCenter">
                                <Button>{this.state.type}</Button>
                            </Dropdown>
                            <RangePicker value={this.state.date} onChange={this.onChange} />
                        </div>
                    </Col>
                    <Col className="gutter-row" span={12}>
                    </Col>
                </Row>
                <Tabs
                  defaultActiveKey="1"
                  tabPosition={'top'}
                  style={{  }}>
                  <TabPane tab="图表" key="1">
                    <ReactEcharts
                    option={this.getOtion()}
                    style={{height: '350px', width: '100%'}}
                    className='react_for_echarts' />

                    <ReactEcharts
                    option={this.getOtion1()}
                    style={{height: '350px', width: '100%'}}
                    className='react_for_echarts' />
                  </TabPane>
                  <TabPane tab="数据" key="2">
                    <Table columns={columns}
                    rowKey={(record) => {return (record.sellDate + record.traderAccount)}}
                    dataSource={this.state.selldatas} />
                  </TabPane>
                </Tabs>

            </div>
        );
    }
}
